<template>
	<view class="confirm_order">
		<view class="fill"></view>
		<view class="order_detail">
			<view class="order_detail_title">{{ type }}</view>
			<view class="order_detail_content">
				<view class="order_detail_content_type">订单编号</view>
				<view class="order_detail_content_data">{{ orderItem.orderNo }}</view>
			</view>
			<view class="order_detail_content">
				<view class="order_detail_content_type">报修时间</view>
				<view class="order_detail_content_data">{{ orderItem.orderDate }}</view>
			</view>
			<view class="order_detail_content">
				<view class="order_detail_content_type">报修设备</view>
				<view class="order_detail_content_data">{{ orderItem.equipName }}</view>
			</view>
			<!-- <view class="order_detail_content">
				<view class="order_detail_content_type">报修单位</view>
				<view class="order_detail_content_data">{{ orderItem.repairUnit }}</view>
			</view> -->
			<view class="order_detail_content">
				<view class="order_detail_content_type">设备品牌</view>
				<view class="order_detail_content_data">{{ orderItem.brand }}</view>
			</view>
			<view class="order_detail_content">
				<view class="order_detail_content_type">设备型号</view>
				<view class="order_detail_content_data">{{ orderItem.model }}</view>
			</view>
			<view class="order_detail_content">
				<view class="order_detail_content_type">报修问题</view>
				<view class="order_detail_content_data">{{ orderItem.problemDescription }}</view>
			</view>
			<view class="order_media">
				<view class="order_media_pic">
					<image v-for="(item, index) in imageList" :key="item" :src="item" mode="aspectFill" @click="preview"></image>
				</view>
				<view class="order_media_vid" v-if="orderItem.videoUrl">
					<video :src="orderItem.videoUrl"></video>
				</view>
			</view>
		</view>
		<view class="fill"></view>
		<view class="user_detail">
			<view class="order_detail_content">
				<view class="order_detail_content_type">报修人</view>
				<view class="order_detail_content_data">{{ orderItem.customername }}</view>
			</view>
			<view class="order_detail_content">
				<view class="order_detail_content_type">联系电话</view>
				<view class="order_detail_content_data">{{ orderItem.phoneno }}</view>
			</view>
			<!--  @click="to_map" -->
			<view class="order_detail_content">
				<view class="order_detail_content_type">客户地址</view>
				<view class="order_detail_content_data">
					<!-- <image src="../../static/img/adress.png"></image> -->
					{{ orderItem.orderAddress }}
				</view>
			</view>
		</view>
		<view></view>
		<view class="kefu" @click="call_user">
			<view class="button-name">
				<image style="width: 90rpx;height: 90rpx;" src="../../static/img/call_kefu.png"></image>
			</view>
		</view>
		<view class="detail_bottom" v-if="statusData == '待接单'">
			<view @click="refuse_order">拒绝接单</view>
			<view @click="to_jd">接单</view>
			<view @click="transfer_order">转单求助</view>
		</view>
		<view class="refuse_order" :style="{ display: refuse }">
			<view class="refuse_order_content">
				<view class="refuse_order_content_top">注意</view>
				<view class="refuse_order_content_center">
					<view>确定拒单吗?</view>
					<view>这将影响您的星级评定</view>
				</view>
				<view class="refuse_order_content_bottom">
					<view class="give_up_order">
						<view @click="give_up">放弃接单</view>
					</view>
					<view class="continue_order">
						<view @click="continues">继续接单</view>
					</view>
				</view>
			</view>
		</view>
		<view class="transfer_order" :style="{ display: transfer }">
			<view class="transfer_order_content">
				<view class="transfer_order_content_top">转单留言</view>
				<view class="transfer_order_content_center">
					<u-textarea placeholder="请输入转单留言" @input="transfer_input" v-model="transfer_message" />
				</view>
				<view class="transfer_order_content_bottom">
					<view class="cancel">
						<view @click="cancel">取消</view>
					</view>
					<view class="determine">
						<view @click="determine">确定</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { dateTimeFormat } from '@/utils/utils.js'
	export default {
		data() {
			return {
				imageList: [],
				type: '订单详情',
				latitude: '',
				longitude: '',
				statusData: '待接单',
				refuse: 'none',
				transfer_message: '',
				transfer: 'none',
				showBtn: true,
				orderItem: {}
			};
		},
		methods: {
			call_user() {
				uni.makePhoneCall({
					// phoneNumber: '9667788'
					phoneNumber: '1234567'
				});
			},
			transfer_input(e) {
				this.transfer_message = e.detail.value;
			},
			preview(e) {
				console.log(e);
				uni.previewImage({
					current: e.currentTarget.dataset.url,
					urls: this.imageList
				});
			},
			radioChange(e) {
				const items = this.items;
				for (let i = 0, len = items.length; i < len; ++i) {
					items[i].checked = items[i].value === e.detail.value;
				}
				this.items = items;
			},
			
			to_jd() {
				let data = {
					id:this.orderItem.id,
					orderNo:this.orderItem.orderNo,
					workName: getApp().globalData.nickName,
					orderStatus: 2,//接单
				};
				console.log(data);
				this.$newapi.updateOrder(data).then(res => {
					this.refuse = 'none';
					uni.navigateTo({
						url: `/pagesIndex/receiving_orders/receiving_orders?orderItem=${JSON.stringify(this.orderItem)}`
					});
				});
			},
			to_map() {
				let latitude = Number(this.orderItem.locationCode.split(',')[0])
				let longitude = Number(this.orderItem.locationCode.split(',')[1])
				if (this.orderItem.locationCode.length) {
					uni.openLocation({
						latitude: latitude, //要去的纬度-地址
						longitude: longitude, //要去的经度-地址
						name: '客户维修地址',
						address: this.orderItem.address
					});
				} else {
					uni.openLocation({
						latitude: 39.54, //要去的纬度-地址
						longitude: 116.23, //要去的经度-地址
						name: '客户维修地址',
						address: this.orderItem.address
					});
				}
			},
			refuse_order() {
				this.refuse = 'block';
			},
			transfer_order() {
				this.transfer = 'block';
			},
			give_up() {
				let data = {
					id:this.orderItem.id,
					orderNo:this.orderItem.orderNo,
					workName: getApp().globalData.nickName,
					orderStatus: -2,//拒单
				};
				console.log(data);
				this.$newapi.updateOrder(data).then(res => {
					this.refuse = 'none';
					uni.redirectTo({
						url: '/pagesIndex/order/order1'
					});
				});
			},
			continues() {
				this.refuse = 'none';
			},
			cancel() {
				this.transfer = 'none';
			},
			determine() {
				Date.prototype.Format = function(fmt) {
					// author: meizz
					let o = {
						'M+': this.getMonth() + 1, // 月份
						'd+': this.getDate(), // 日
						'h+': this.getHours(), // 小时
						'm+': this.getMinutes(), // 分
						's+': this.getSeconds(), // 秒
						'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
						S: this.getMilliseconds() // 毫秒
					};
					if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
					for (let k in o)
						if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : (
							'00' + o[k]).substr(('' + o[k]).length));
					return fmt;
				};
				let time2 = new Date().Format('yyyy-MM-dd hh:mm:ss');
				let data = {
					id:this.orderItem.id,
					orderNo:this.orderItem.orderNo,
					type: this.orderItem.type,
					workName: getApp().globalData.nickName,
					orderStatus: -1,//转单
					transferMessage: this.transfer_message,
					transferDate: time2
				};
				if (this.transfer_message == '') {
					uni.showToast({
						title: '留言不能为空',
						icon: 'error'
					});
					return;
				}
				console.log(data);
				// return
				this.$newapi.updateOrder(data).then(res => {
					this.transfer = 'none';
					uni.redirectTo({
						url: '/pagesIndex/order/order1'
					});
				});
			}
		},
		onLoad(options) {
			this.orderItem = JSON.parse(options.orderItem)
			this.imageList = this.orderItem.pictureUrl.split(',')
			this.statusData = options.statusData
			this.orderItem.orderDate = dateTimeFormat(this.orderItem.orderDate)
			console.log(this.orderItem);
		}
	};
</script>

<style lang="less" scoped>
	.confirm_order {
		width: 100%;
		height: 1448rpx;
		background-image: url(https://www.bjroyalkitchen.com/images/root/20210511003.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.fill {
		width: 100%;
		height: 20rpx;
	}

	.order_detail {
		width: 90%;
		// height: 880rpx;
		margin: 0 auto;
		background-color: rgba(255, 255, 255, 0.55);
		box-shadow: 0 6rpx 14rpx rgba(162, 162, 162, 0.1);
		border-radius: 20rpx;
	}

	.order_detail_title {
		width: 90%;
		height: 80rpx;
		margin: 0 auto;
		line-height: 80rpx;
		text-align: left;
		font-size: 30rpx;
		color: #3057be;
	}

	.order_detail_content {
		width: 90%;
		height: 100rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
	}

	.order_detail_content_type {
		width: 20%;
		height: 100%;
		line-height: 100rpx;
		text-align: left;
		font-size: 28rpx;
		color: #a2a2a2;
	}

	.order_detail_content_data {
		width: 80%;
		height: 100%;
		/* line-height: 100rpx; */
		text-align: left;
		font-size: 26rpx;
		color: #333333;
		display: flex;
		align-items: center;
	}

	.order_detail_content_data image {
		width: 39rpx;
		height: 36rpx;
	}

	.order_media {
		width: 90%;
		height: 200rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
	}

	.order_media_pic {
		width: 360rpx;
		height: 180rpx;
		display: flex;
		flex-direction: row;
	}

	.order_media_pic image {
		width: 180rpx;
		height: 180rpx;
		margin-left: 10rpx;
	}

	.order_media_vid {
		width: 200rpx;
		height: 180rpx;
		margin-left: 20rpx;
	}

	.order_media_vid video {
		width: 200rpx;
		height: 180rpx;
	}

	.user_detail {
		width: 90%;
		height: 300rpx;
		margin: 0 auto;
		background-color: rgba(255, 255, 255, 0.55);
		box-shadow: 0 6rpx 14rpx rgba(162, 162, 162, 0.1);
		border-radius: 20rpx;
	}

	.kefu {
		// width: 100%;
		height: 90rpx;
		position: fixed;
		bottom: 100rpx;
		right: 0;
	}

	.button-name:not([size='mini']) {
		width: 90rpx;
		height: 90rpx;
		float: right;
		padding: 0;
	}

	.detail_bottom {
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
	}

	.detail_bottom view {
		width: 20%;
		height: 60rpx;
		margin: 20rpx 7%;
		line-height: 60rpx;
		text-align: center;
		font-size: 22rpx;
		border-radius: 16rpx;
	}

	.detail_bottom view:nth-child(1) {
		background-color: #e2e2e2;
		color: #a2a2a2;
	}

	.detail_bottom view:nth-child(2) {
		background-color: #3057be;
		color: #ffffff;
	}

	.detail_bottom view:nth-child(3) {
		background-color: #6e81f3;
		color: #ffffff;
	}

	.refuse_order {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}

	.refuse_order_content {
		width: 80%;
		margin: 50% auto;
		// height: 450rpx;
		background-color: white;
		border-radius: 20rpx;
	}

	.refuse_order_content_top {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 34rpx;
		color: black;
		font-weight: bold;
	}

	.refuse_order_content_center {
		width: 100%;
		height: 100rpx;
	}

	.refuse_order_content_center view {
		width: 100%;
		height: 35rpx;
		text-align: center;
		color: #a2a2a2;
	}

	.refuse_order_content_center view:nth-child(1) {
		font-size: 26rpx;
		line-height: 50rpx;
	}

	.refuse_order_content_center view:nth-child(2) {
		font-size: 22rpx;
		line-height: 50rpx;
	}

	.refuse_order_content_bottom {
		width: 100%;
		height: 100rpx;
		display: flex;
		flex-direction: row;
	}

	.continue_order,
	.give_up_order {
		width: 50%;
		height: 100%;
	}

	.continue_order view {
		width: 50%;
		height: 50rpx;
		margin: 20rpx auto;
		border-radius: 10rpx;
		background-color: #3057be;
		font-size: 22rpx;
		line-height: 50rpx;
		text-align: center;
		color: #ffffff;
	}

	.give_up_order view {
		width: 50%;
		height: 50rpx;
		margin: 20rpx auto;
		border-radius: 10rpx;
		background-color: #f2f2f2;
		font-size: 22rpx;
		line-height: 50rpx;
		text-align: center;
		color: #3057be;
	}

	.transfer_order {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}

	.transfer_order_content {
		width: 80%;
		margin: 50% auto;
		// height: 450rpx;
		background-color: white;
		border-radius: 20rpx;
	}

	.transfer_order_content_top {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 34rpx;
		color: black;
		font-weight: bold;
	}

	.transfer_order_content_center {
		width: 80%;
		// height: 130rpx;
		margin: 0 auto;
		border-radius: 20rpx;
		// background-color: #f2f2f2;
		padding: 10rpx;
	}

	.transfer_order_content_center textarea {
		width: 100%;
		height: 100%;
		font-size: 22rpx;
	}

	.transfer_order_content_bottom {
		width: 100%;
		height: 100rpx;
		display: flex;
		flex-direction: row;
	}

	.cancel,
	.determine {
		width: 50%;
		height: 100%;
	}

	.cancel view {
		width: 50%;
		height: 50rpx;
		margin: 20rpx auto;
		border-radius: 10rpx;
		background-color: #f2f2f2;
		font-size: 22rpx;
		line-height: 50rpx;
		text-align: center;
		color: #3057be;
	}

	.determine view {
		width: 50%;
		height: 50rpx;
		margin: 20rpx auto;
		border-radius: 10rpx;
		background-color: #3057be;
		font-size: 22rpx;
		line-height: 50rpx;
		text-align: center;
		color: #ffffff;
	}
</style>